<template>
  <view>
    <view class="ek-card">
      <view class="h2">订单编号：{{ info.order_sn }}</view>
      <view class="h2">订单金额：￥{{ pay_money }}</view>
      <view class="h2 flex aic">退款金额：<text class="ek-color-red">￥{{ pay_money - pay_money * sub_bill / 100 | toFixed  }}</text>（扣{{sub_bill}}%违约金）
      <view class="tip" @click="openTip">!</view>
      </view>
    </view>

    <view class="ek-card">
      <view>
        <view class="h1">{{ info.title }}</view>
        <view class="h3">{{ info.remark }}</view>
        <view class="h3">{{ info.start_time | formatDate }}</view>
        <view class="h2 flex jcsb" v-for="(sub, index) in info.child" :key="index">
          <view>座位号：<text class="ek-color-red">{{sub.row_number}}排{{sub.column_number}}号</text></view>
          <view>{{sub.price}}</view>
        </view>
      </view>
    </view>

    <picker mode="selector" :range="refund_msg" @change="onRefundOrder">
      <view class="ek-cell">
        <view class="ek-title">退款原因 <text v-if="msg">：{{msg}}</text></view>
        <view class="iconfont icon-jiantou"></view>
      </view>
    </picker>

    <view class="ek-submit-btn" @click="onSubmit">确定</view>
  </view>
</template>

<script>
import productConSwiper from "@/components/productConSwiper/index.vue";
import {HTTP_REQUEST_URL} from "@/config/app";
import {activityRefundOrder, payActivity, performGetOrderDetail} from "@/api/2_activity";

export default {
  components: {productConSwiper},
  data() {
    return {
      item: {},
      info: {child:[]},
      refund_msg: [],
      msg: '',
      day_time: '',
      sub_bill: ''
    };
  },
  onLoad(options) {
    this.day_time = options.day_time
    this.sub_bill = options.sub_bill
    this.info = JSON.parse(options.info)
    this.refund_msg = JSON.parse(options.refund_msg)
  },
  computed: {
    pay_money(){
      return  this.info.child.reduce((a, b)=>{
          return +a + +b.price
      }, 0)
    }
  },
  methods: {
    openTip(){
      uni.showModal({
        title: '退款规则',
        content: `距离演出开始时间${this.day_time}天之内可全额退款，距离演出开始xx分钟可退款订单金额的${ 100 - this.sub_bill}%`,
        showCancel: false,
        confirmText: '我知道了'
      })
    },
    init() {
      performGetOrderDetail(this.item.order_sn).then(res => {
        let {data} = res
        this.info = data
      })
    },
    onRefundOrder(e) {
      this.msg =  this.refund_msg[e.detail.value]
    },
    onSubmit(){
      if( this.msg == ''){
        uni.showToast({icon: 'none', title: '请选择退款原因'})
        return
      }
      activityRefundOrder(this.item.id, {
        refund_msg: this.msg
      }).then(res => {
        this.$util.Tips({
          title: '提交成功',
          icon: 'success'
        });
      }).catch(err => {
        uni.showToast({icon: 'none', title: err})
      })
    }
  }
};
</script>

<style lang="scss">
@import "./style.scss";
.tip{
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #e93323;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
</style>